<span *ngIf="none" class="primary-color">
  No state to show
</span>
<div *ngFor="let k of keys(state)" [ngClass]="{pl4: expandable(k)}">
  <span class="property-container" (click)="expandTree(k, $event)">
    <span class="info-key" [ngClass]="{output: isEmittable(k)}">
      <div [ngClass]="{
        expander: true,
        rotate90: !expanded(k),
        transparent: !expandable(k)
      }"></div>
      <span class="primary-color">
        <span *ngIf="isComponentObjectType(k, ObjectType.Input)" class="decorator">
          @Input(<span class="info-value" *ngIf="getAlias(k)">'{{getAlias(k)}}'</span>)
        </span>
        <span *ngIf="isComponentObjectType(k, ObjectType.Output)" class="decorator">
          @Output(<span class="info-value" *ngIf="getAlias(k)">'{{getAlias(k)}}'</span>)
        </span>
        <span *ngIf="isComponentObjectType(k, ObjectType.ViewChild)" class="decorator">
          @ViewChild({{getSelector(k)}})
        </span>
        <span *ngIf="isComponentObjectType(k, ObjectType.ViewChildren)" class="decorator">
          @ViewChildren({{getSelector(k)}})
        </span>
        <span *ngIf="isComponentObjectType(k, ObjectType.ContentChild)" class="decorator">
          @ContentChild({{getSelector(k)}})
        </span>
        <span *ngIf="isComponentObjectType(k, ObjectType.ContentChildren)" class="decorator">
          @ContentChildren({{getSelector(k)}})
        </span>
      </span>
      {{k}}:
    </span>
    <span *ngIf="isEmittable(k)" class="emitter">
      <input class="editable" type="text" #prop />
      <div [ngSwitch]="emitState.get(k)" class="emit-state">
        <span *ngSwitchCase="EmitState.Emitted" class="emitted">✔</span>
        <span *ngSwitchCase="EmitState.Failed" class="failed">✘</span>
      </div>
      <button class="btn btn-primary bg-olive mb1"
        (click)="emitValue(k, prop.value)">
        Emit
      </button>
    </span>
    <span *ngIf="!isEmittable(k) && nest(k)" class="info-value">
      {{displayType(k)}}
    </span>
    <bt-state-values
      *ngIf="!isEmittable(k) && !nest(k)"
      [id]="id"
      [metadata]="metadata"
      [path]="path.concat(k)"
      [value]="state[k]"
      (updateValue)="updateValue.emit($event)">
    </bt-state-values>
  </span>
  <div *ngIf="expanded(k)">
    <bt-render-state
       *ngIf="nest(k)"
       [id]="id"
       [level]="level + 1"
       [path]="path.concat(k)"
       [componentMetadata]="componentMetadata"
       [metadata]="metadata"
       [state]="state[k]"
       (updateValue)="updateValue.emit($event)">
    </bt-render-state>
  </div>
</div>
